<template>
    <div>
        <template v-for="(value, key) in equipmentList">
            <el-card class="box-card" :key="key" v-if="key && value.length">
                <template #header>
                    <div class="clearfix">
                        <span>{{ key }}</span>
                    </div>
                </template>

                <div class="text item">
                    <ul class="item_list">
                        <li v-for="(o, index ) in value" :key="key + '-' + index">
                            <div class="ico">
                                <span v-if="!o.online" class="iconfont icon-yalichuanganqi"></span>
                                <span v-if="o.online" class="iconfont icon-yalichuanganqi"
                                    style="color: lightgreen;"></span>
                            </div>
                            <div class="value">{{ o.devValue }}</div>
                            <div>{{ o.devName }}</div>
                            <div class="eui">{{ o.eui }}</div>
                        </li>
                    </ul>
                </div>
            </el-card>
        </template>

    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { $EquipmentData } from "@/api"
export default defineComponent({
    name: 'EquipmentList',
    setup() {
        const Data: any = reactive({
            equipmentList: []
        })
        onMounted(() => {
            $EquipmentData().then(res => {
                Data.equipmentList = res.data.data
            })
        })
        return { ...toRefs(Data) }
    }

});
</script>

<style lang="less" scoped>
.box-card {
    margin-top: 10px;
}

.item_list {
    display: flex;
    flex-wrap: wrap;

    li {
        width: 250px;
        height: 180px;
        display: flex;
        margin-bottom: 10px;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #ccc;
        margin-right: 10px;
        border-radius: 10px;

        .ico {
            padding-bottom: 10px;
            transform: rotate(180deg);

            .icon-yalichuanganqi {
                font-size: 50px;
            }

        }

        .value {
            font-size: 20px;
            font-weight: bold;
        }

        img {
            width: 20px;
            height: auto;
            margin-top: 20px;
        }

        .eui {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #ccc;
        }
    }
}
</style>